<template>
  <div class="home">
    <div class="subprogram">
      <Approval />
    </div>
    <div class="subprogram">
      <div class="title">
        <span>人员登记系统</span>
        <a-button type="primary" class="quit" @click="quit" v-if="$route.name!='home-index'"> 退出登录 </a-button>
      </div>

      <router-view name="register" />
    </div>
    <div class="subprogram">
      <Business />
    </div>
    <div class="subprogram">
      <Introduce />
    </div>
    <a-modal
      v-model="showModal"
      :closable="false"
      :maskClosable="false"
      destroyOnClose
      title="请选择厂区"
    >
      <a-select
        show-search
        style="width: 80%"
        placeholder="选择厂区"
        @change="selectFactory"
      >
        <a-select-option
          v-for="(item, index) in factorys"
          :key="index"
          :value="item.value"
        >
          {{ item.name }}
        </a-select-option>
      </a-select>
      <template #footer>
        <a-button type="primary" :disabled="!isSelectFactory" @click="handleOk">
          确认
        </a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
// @ is an alias to /src
import Business from "./home/Business";
import Approval from "./home/Approval";
import Introduce from "./home/Introduce";
import { getFactorys } from "../api/server";

export default {
  name: "Home",
  components: {
    Business,
    Approval,
    Introduce,
  },
  data() {
    return {
      factoryId: null,
      factorys: [],
      showModal: true,
      isSelectFactory: false,
    };
  },
  created() {
    getFactorys().then((data) => {
      data.map((item) => {
        this.factorys.push({
          name: item.name,
          value: item.id,
        });
      });
    });
  },
  methods: {
    quit(){
      this.$router.push({
        name:"home-index"
      });
      this.$store.commit("setFactoryId", null);
      this.showModal=true;

    },
    handleOk() {
      this.showModal = false;
      this.$store.commit("setFactoryId", this.factoryId);
    },
    selectFactory(val) {
      this.factoryId = val;
      this.isSelectFactory = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  .subprogram {
    flex: 0 0 50%;
    height: 50%;
    width: 50%;
    border: 1px solid rgb(44, 43, 43);
    box-sizing: border-box;
    padding: 20px;

    .title {
      height: 10%;
      font-size: 18px;
      align-self: flex-start;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>  
